<template>
	<view class="page">
		<u-swiper :list="adsList" :interval="5000" :duration="1000" indicator indicatorActiveColor="#c0c0c0" indicatorMode="dot" circular height="195" radius="0"></u-swiper>
		<u-search
			:show-action="false"
			borderColor="rgb(230, 230, 230)"
			searchIcon="/static/job/seach.png"
			bgColor="#ffffff"
			height="60"
			margin="20rpx"
			placeholder="请输入职位名称/公司名称/名称关键词"
		></u-search>
		
		<view class="job-city">
		        <view class="job-city-title">
		            招聘城市
		        </view>
		        <scroll-view scroll-x class="job-city-content">
		            <view class="job-city-content-item" v-for="(cityItem , cityIndex) in jobCity" :key="cityItem.ID" @click="goToRecruit(cityItem.ID)">{{ cityItem.Name }}</view>
		        </scroll-view>
		    </view>
		<u-gap height="5" bgColor="#f5f5f5"></u-gap>
		<view class="job-notice">
			<image src="../../static/job/new1.png" class="job-notice-img" mode="aspectFit"></image>
			<u-notice-bar :text="NoticeList" icon=" " bgColor="#ffffff" color="#636363" direction="column" speed="250" fontSize="26rpx"></u-notice-bar>
		</view>
		<view class="job-column">
			<u-grid :border="false" col="4">
				<u-grid-item @click="goToColumnNavigation(columnListIndex)" v-for="(columnListItem, columnListIndex) in columnList" :key="columnListIndex">
					<u--image width="130rpx" height="131rpx" :src="columnListItem.imageUrl"></u--image>
					<text class="job-column-text">{{ columnListItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-gap height="5" bgColor="#f5f5f5" marginTop="30rpx" marginBottom="0rpx"></u-gap>
		<view class="job-statistics">
			<image src="../../static/job/1.gif" class="job-statistics-image" mode="aspectFit"></image>
			<u--text text="入住企业:" size="23rpx" color="#636363" align="center"></u--text>
			<u--text :text="enterprise" size="23rpx" color="#c8000a" align="center"></u--text>
			<u--text text="职位:" size="23rpx" color="#636363" align="center"></u--text>
			<u--text :text="position" size="23rpx" color="#c8000a" align="center"></u--text>
			<u--text text="简历:" size="23rpx" color="#636363" align="center"></u--text>
			<u--text :text="resume" size="23rpx" color="#c8000a" align="center"></u--text>
			<u--text text="访问:" size="23rpx" color="#636363" align="center"></u--text>
			<u--text :text="visits" size="23rpx" color="#c8000a" align="center"></u--text>
		</view>
		<u-gap height="5" bgColor="#f5f5f5" marginTop="0rpx" marginBottom="15rpx"></u-gap>
		<view class="job-enterprise">
			<u-section title="名企推荐" :show-line="false" :font-size="30" @click="goToEnterprises"></u-section>
			<view class="job-enterprise-list">
				<swiper duration="1000" interval="5000" autoplay="true" circular="true" style="width: 100%;display: flex; flex-direction: row; flex-wrap: nowrap; height: 200rpx;">
					<swiper-item class="job-enterprise-swiper-item" v-for="(item, index) in famousEnterprisesList" :key="item.ID">
						<view class="job-enterprise-item" @click="goToCompanyShow(item.ID)">
							<!-- <u--image :src="$getImgUrl(item.LogoImg)" width="88rpx" height="88rpx" mode="widthFix" shape="circle"></u--image> -->
							<u-avatar :src="$getImgUrl(item.LogoImg)" size="100rpx"></u-avatar>
							<view class="job-enterprise-content">
								<view class="job-enterprise-title">{{ item.QYName }}</view>
								<view class="job-enterprise-text">{{ item.ZPCount }}个招聘</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<u-gap height="5" bgColor="#f5f5f5" marginTop="10rpx" marginBottom="2rpx"></u-gap>
		<view class="job-position-resume">
			<u-tabs
				:list="switchList"
				:duration="0"
				lineWidth="17"
				lineColor="#c8000a"
				:scrollable="false"
				:itemStyle="{ height: '70rpx', width: '120rpx', flex: '0', fontsize: '30rpx' }"
				:inactiveStyle="{ color: '#333333', fontWeight: 'bold' }"
				:activeStyle="{ color: '#c8000a', fontWeight: 'bold' }"
				@click="switchChange()"
			>
				<view slot="right" class="job-position-resume-more" @click="gotoPositionOrResumeMore()">
					更多
					<u-icon name="arrow-right" size="12" color="#909399"></u-icon>
				</view>
			</u-tabs>
		</view>

		<view class="job-position"  v-show="switchChangeState">
			<view class="job-position-tabs">
				<view class="job-position-tabs-item" :class="positionItem.checked ? 'job-position-tabs-item-select' : ''" v-for="(positionItem, index) in jobPositionTabs" :key="index" @click="positionTabsItemClick(positionItem.ID)" >
					{{ positionItem.ClassName }}
				</view>
			</view>
			<!-- 热门职位开始 -->
			<view class="job-position-list">
				<HotJobs :hotJobsList="hotJobsList"></HotJobs>
				<u-loadmore :status="loadMoreStatus" loading-text="努力加载中..." loadmore-text="上拉加载" nomore-text="没有更多信息..." />
			</view>
			<!-- 热门职位结束 -->
		</view>

		<view class="job-position" v-show="!switchChangeState">
			<!-- 求职简历开始 -->
			<view class="job-resume-list">
				<Resume :newResumeList="newResumeList"></Resume>
				<u-loadmore :status="loadMoreStatus" loading-text="努力加载中..." loadmore-text="上拉加载" nomore-text="没有更多信息..." />
			</view>
			<!-- 求职简历结束 -->
		</view>

		<!-- 自定义底部导航菜单开始 -->
		<JobTabbar :selectIndex="jobTabbarIndex"></JobTabbar>
		<!-- 自定义底部导航菜单结束 -->
		<!-- 浮动导航开始 -->
		<view class="job-float-navigation" @click="showFloatNavigation()"><image src="../../static/job/nav6.png" mode="aspectFit" class="job-float-navigation-image"></image></view>
		<JobFloatNavigation :jobFloatNavigationIsShow="floatNavigation"></JobFloatNavigation>
		<!-- 浮动导航结束 -->
		<!-- 安全高度框架 -->
		<view class="safe-height"></view>
	</view>
</template>

<script>
import JobTabbar from '@/components/JobTabbar/JobTabbar.vue';
import HotJobs from '@/components/HotJobs/HotJobs.vue';
import Resume from '@/components/Resume/Resume.vue';
import JobFloatNavigation from '@/components/JobFloatNavigation/JobFloatNavigation.vue';
export default {
	data() {
		return {
			jobTabbarIndex: 1, //控制底部导航显示那个栏目激活状态
			adsList: [],//banner广告图
			jobCity: [],// 招聘城市列表
			enterprise : '' ,// 入住企业数量
			position: '', // 入住职位数量
			resume:'', // 简历数量
			visits: '', // 访问数量
			famousEnterprisesList: [], // 名企业推荐列表
			switchChangeState: true, // 热门职位与求职简历是否显示
			indexPage: 1, // 首页默认翻页
			indexAllPage: 1, //首页全部分业
			floatNavigation: false, //是否显示悬浮菜单
			// 切换列表
			switchList: [
				{
					name: '热门职位'
				},
				{
					name: '求职简历'
				}
			],
			NoticeList: [], // 滚动公告
			columnList: [
				{
					imageUrl: '/static/job/nav1.png',
					title: '全职招聘',
					url: '../jobRecruit/jobRecruit'
				},
				{
					imageUrl: '/static/job/nav2.png',
					title: '兼职招聘',
					url: '../jobPartTime/jobPartTime'
				},
				{
					imageUrl: '/static/job/nav3.png',
					title: '人才简历',
					url: '../jobResume/jobResume'
				},
				{
					imageUrl: '/static/job/nav4.png',
					title: '推荐企业',
					url: '../jobEnterprises/jobEnterprises'
				}
			],
			jobPositionTabs: [], // 热门求职 职位分类
			hotJobsList: [] ,// 热门职位列表
			hotJobsSelectClass: 0, // 热门职位选择的分类
			hotJobsPage: 1, // 热门职位列表当前页数
			hotJobsAllPage: 1, // 热门职位列表所有页数
			newResumeList: [], // 最新求职简历列表
			newResumePage: 1, // 最新求职简历当前页数
			newResumeAllPage: 1, // 最新求职简历所有页面数
			loadMoreStatus: 'loading', // 底部加载状态
		};
	},
	async onLoad(option) {
		await this.$onLaunched;
		this.readOnLoad()
	},
	onPullDownRefresh() {
		this.readOnLoad() // 首页重新加载
	},
	onReachBottom() {
		if(this.hotJobsSelectClass == 0 && this.switchChangeState) {
			this.indexPage++
			if(this.indexPage <= this.indexAllPage) {
				this.getJobIndex()
			}
			
		} else {
			if(this.switchChangeState) {
				this.hotJobsPage++
				if(this.hotJobsPage <= this.hotJobsAllPage){
					this.getJobIndexHotJobList()
				}
			} else {
				this.newResumePage++
				if(this.newResumePage <= this.newResumeAllPage ){
					this.getJobIndexNewResumeList()
				}
			}
		}
		
	},
	onShow() {
		// this.readOnLoad() // 首页重新加载
		console.log(uni.getStorageSync('globaUserInfo'))
		console.log(uni.getStorageSync('globalUserInfoState'))
		if (uni.getStorageSync('globalUserInfoState') == '') {
			this.$Firstauthorization();
		}
	},
	methods: {
		// 初始化数据
		pageDataInit() {
			this.adsList = [] // banner 图片
			this.indexPage = 1 // 首页默认翻页
			this.indexAllPage = 1 //首页全部分业
			this.famousEnterprisesList = [], // 名企业推荐列表
			this.switchChangeState = true // 热门职位与求职简历是否显示
			this.indexPage = 1
			this.jobPositionTabs = [] // 热门求职 职位分类 
			this.hotJobsList = [] // 热门职位列表
			this.hotJobsSelectClass = 0 // 热门职位选择的分类
			this.hotJobsPage = 1 // 热门职位列表当前页数
			this.hotJobsAllPage = 1 // 热门职位列表所有页数
			this.newResumeList = [] // 最新求职简历列表
			this.newResumePage = 1 // 最新求职简历当前页数
			this.newResumeAllPage = 1 // 最新求职简历所有页面数
		},
		// 加载首页数据
		readOnLoad(){
			this.pageDataInit()
			this.getJobIndex()
			this.getJobIndexArea()
			this.getJobIndexNewResumeList()
		},
		// 获取首页数据
		getJobIndex(){
			this.loadMoreStatus = 'loading'
			this.$api.getJobIndex({openid: getApp().globalData.openid, page: this.indexPage})
			.then(res => {
				this.indexAllPage = res.data.Allpage
				if(this.indexPage == 1) {
					// 处理Bannerurl
					res.data.AdsList.forEach((tupianItem) =>{
						this.adsList.push(this.$getImgUrl(tupianItem.imgpath))
					})
					// 组合公告信息开始（企业入住加职位发布）
					let tempNoticeList = []
					res.data.QYGGList.forEach((item) => {
						tempNoticeList.push(Object.assign(item, { type: 1 }))
					})
					res.data.ZWGGList.forEach((item) => {
						tempNoticeList.push(Object.assign(item, { type: 2 }))
					})
					tempNoticeList.forEach((item) => {
						let tempItemText = ''
						if(item.type == 1) {
							tempItemText = '<span style="color:#c8000a">' + item.QYName + '</span> 强势入住'
						}
						if(item.type == 2) {
							tempItemText = '新职位 <span style="color:#c8000a">' + item.ZWName + '</span> 发布成功'
						}
						this.NoticeList.push(tempItemText)
					})
					// 组合公告信息结束
					this.enterprise = res.data.QYCount  // 入住企业数量
					this.position = res.data.ZWCount // 入住职位数量
					this.resume = res.data.JLCount // 简历数量
					this.visits = res.data.Hits // 访问数量
					this.famousEnterprisesList = res.data.QYTJList // 名企推荐列表
					res.data.ZWClass.forEach((item) => {
						this.jobPositionTabs.push(Object.assign(item, { checked: false }))
					})
				}
				// res.data.ZWList.forEach((item) => {
				// 	if(item.IsXian ==1 && item.IsOnline ==1) {
				// 		this.hotJobsList.push(item)
				// 	}
				// })
				// 判断首页是否进行翻页如果翻页在热门职位列表后追加
				if(this.indexPage == 1) {
					this.hotJobsList = res.data.ZWList  // 热门职位列表
					
					
				} else {
					this.hotJobsList = [...this.hotJobsList, ...res.data.ZWList];
					this.$forceUpdate();
					
				}
				if(this.indexAllPage > this.indexPage) {
					this.loadMoreStatus = 'loadmore'
				} else {
					this.loadMoreStatus = 'nomore'	
				}
				
				console.log(res.data)
				uni.stopPullDownRefresh()
			})
		},
		// 获取招聘城市数据
		getJobIndexArea(){
			this.$api.getJobIndexArea({}).then(res => {
				this.jobCity = res.data.Area
				console.log(this.jobCity)
				// console.log(res.data)
			})
		},
		// 切换热门职位与求职简历
		switchChange(item) {
			if(item.index == 0) {
				this.switchChangeState = true
			} else {
				this.switchChangeState = false
			}
			this.loadMoreStatus = 'loading'
		},
		// 热门职业分类选择后获取信息列表
		getJobIndexHotJobList() {
			//组合参数
			let option = {openid: getApp().globalData.openid, page: this.hotJobsPage}
			if(this.hotJobsSelectClass != 0) {
				option.xuan = this.hotJobsSelectClass
			}
						
			this.$api.getJobIndexHotJobList(option).then(res => {
				this.hotJobsAllPage = res.data.Allpage
				if(this.hotJobsPage > 1) {
					this.hotJobsList = [...this.hotJobsList, ...res.data.ZWList];
					this.$forceUpdate();
				} else {
					this.hotJobsList = res.data.ZWList
				}
				// this.hotJobsPage = res.data.CurrentPage++
			})
			
			if(this.hotJobsAllPage > this.hotJobsPage) {
				this.loadMoreStatus = 'loadmore'
			} else {
				this.loadMoreStatus = 'nomore'	
			}
		},
		// 获取最新简历信息列表
		getJobIndexNewResumeList() {
			this.$api.getJobIndexNewResumeList({openid: getApp().globalData.openid, page: this.newResumePage}).then(res => {
				this.newResumeAllPage = res.data.Allpage
				if(this.newResumeAllPage > 1) {
					this.newResumeList = [...this.newResumeList, ...res.data.XXList];
					this.$forceUpdate();
				} else {
					this.newResumeList = res.data.XXList
				}
				
				if(this.newResumeAllPage > this.newResumePage) {
					this.loadMoreStatus = 'loadmore'
				} else {
					this.loadMoreStatus = 'nomore'	
				}
				
				console.log(res.data)
			})
			
			
			
		},
		gotoPositionOrResumeMore() {
			if(this.switchChangeState) {
				uni.$u.route('/pages/jobRecruit/jobRecruit')
			} else {
				uni.$u.route('/pages/jobResume/jobResume')
			}
		},
		goToRecruit(cityId){
			uni.$u.route('/pages/jobRecruit/jobRecruit', {
				cityId: cityId
			})
		},		
		showFloatNavigation() {
			this.floatNavigation = !this.floatNavigation;
		},
		positionTabsItemClick(itemId) {
			this.jobPositionTabs.map((item) => {
				if(item.ID == itemId) {
					this.hotJobsAllPage = 1
					this.hotJobsPage =1 
					item.checked = true
					this.hotJobsSelectClass = itemId
					this.getJobIndexHotJobList()
				} else {
					item.checked = false
				}
			});
		},
		goToColumnNavigation(index) {
			uni.navigateTo({
				url: this.columnList[index].url
			});
		},
		goToCompanyShow(id) {
			uni.$u.route({
				url: 'pages/jobCompany/jobCompany',
				params: {
					id: id,
				}
			});
		},
		goToEnterprises() {
			uni.$u.route('/pages/jobEnterprises/jobEnterprises')
		},
	},
	components: {
		JobTabbar,
		HotJobs,
		Resume,
		JobFloatNavigation
	}
};
</script>
<style lang="scss" scoped>
@import url('job.css');
</style>
